<template>
  <div class="all-files-container">
    <!-- 主要内容区域 -->
    <el-card class="main-content">
      <!-- 搜索条件区域 -->
      <div class="search-section">
        <div class="search-form">
          <!-- 文件名称搜索 -->
          <div class="search-item">
            <label class="search-label">文件名称：</label>
            <el-input v-model="searchParams.name" placeholder="请输入文件名称" clearable class="search-input"
              @keyup.enter="handleSearch" @clear="handleSearch">
              <template #prefix>
                <el-icon>
                  <Search />
                </el-icon>
              </template>
            </el-input>
          </div>

          <!-- 文件类型搜索 -->
          <div class="search-item">
            <label class="search-label">文件分类：</label>
            <CategorySelector v-model="searchParams.categoryIdList" placeholder="请选择文件分类" width="200px" :multiple="true"
              @change="handleSearch" />
          </div>

          <!-- 资源类型搜索 -->
          <div class="search-item">
            <label class="search-label">资源类型：</label>
            <el-select v-model="searchParams.type" placeholder="请选择资源类型" clearable class="search-select"
              @change="handleSearch">
              <el-option label="视频" value="1" />
              <el-option label="音频" value="2" />
              <el-option label="图片" value="3" />
              <el-option label="文档" value="4" />
            </el-select>
          </div>

          <!-- 搜索按钮 -->
          <div class="search-actions">
            <el-button type="primary" @click="handleSearch">
              <el-icon>
                <Search />
              </el-icon>
              搜索
            </el-button>
            <el-button @click="resetSearch">重置</el-button>
          </div>
        </div>
      </div>

      <!-- 工具栏 -->
      <div class="toolbar">
        <div class="toolbar-left">
          <el-button-group>
            <el-button :type="viewMode === 'grid' ? 'primary' : 'default'" @click="setViewMode('grid')">
              <el-icon>
                <Grid />
              </el-icon>
            </el-button>
            <el-button :type="viewMode === 'list' ? 'primary' : 'default'" @click="setViewMode('list')">
              <el-icon>
                <List />
              </el-icon>
            </el-button>
          </el-button-group>
        </div>
        <div class="toolbar-right">
          <!-- 全选操作 -->
          <div v-if="fileList.length > 0 && viewMode === 'grid'" class="select-actions">
            <el-button v-if="selectedFiles.length < fileList.length" type="primary" plain size="small"
              @click="selectAllFiles">
              全选
            </el-button>
            <el-button v-if="selectedFiles.length > 0" type="info" plain size="small" @click="clearSelection">
              取消全选
            </el-button>
          </div>

          <!-- 批量操作按钮 -->
          <el-button type="danger" @click="handleBatchDelete" :disabled="selectedFiles.length === 0">
            <el-icon>
              <Delete />
            </el-icon>
            批量删除 ({{ selectedFiles.length }})
          </el-button>
        </div>
      </div>

      <!-- 文件展示区域 -->
      <div class="content-area">
        <!-- 空状态提示 -->
        <div v-if="!loading && fileList.length === 0" class="empty-state">
          <div class="empty-icon">
            <el-icon size="64" color="#c0c4cc">
              <Document />
            </el-icon>
          </div>
          <div class="empty-text">
            <h3>暂无文件</h3>
            <p>当前分类下没有找到任何文件，您可以尝试：</p>
            <ul>
              <li>切换到其他分类查看</li>
              <li>调整搜索条件</li>
            </ul>
          </div>
        </div>

        <!-- 文件网格视图 -->
        <div v-else-if="viewMode === 'grid'" class="file-grid">
          <div v-for="file in fileList" :key="file.id" class="file-card" :class="{ 'selected': isFileSelected(file) }"
            @click="toggleFileSelection(file)">
            <!-- 选择复选框 -->
            <div class="file-checkbox">
              <el-checkbox :model-value="isFileSelected(file)" @change="toggleFileSelection(file)" @click.stop />
            </div>

            <!-- 文件图标 -->
            <div class="file-icon">
              <img :src="getFileIconUrl(file.iconType || 'unknown')" alt="文件图标" class="file-icon-img" />
            </div>

            <!-- 文件信息 -->
            <div class="file-info">
              <div class="file-name" :title="file.name">{{ file.name }}</div>
              <div class="file-meta">{{ getFileTypeName(file.type) }}</div>
              <div class="file-meta">{{ file.createTime }}</div>
              <div class="file-size" v-if="file.size">{{ formatFileSize(file.size) }}</div>
            </div>

            <!-- 操作按钮 -->
            <div class="file-actions">
              <el-button type="text" size="small" @click.stop="downloadFile(file)">
                <el-icon>
                  <Download />
                </el-icon>
              </el-button>
              <el-dropdown @command="handleFileAction" trigger="click">
                <el-button type="text" size="small" @click.stop>
                  <el-icon>
                    <MoreFilled />
                  </el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item :command="{ action: 'preview', file }">预览</el-dropdown-item>
                    <el-dropdown-item :command="{ action: 'delete', file }" divided>删除</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </div>

        <!-- 文件列表视图 -->
        <div v-else class="file-list">
          <el-table :data="fileList" style="width: 100%" v-loading="loading" @selection-change="handleSelectionChange">
            <!-- 复选框列 -->
            <el-table-column type="selection" width="55" />
            <el-table-column width="50">
              <template #default="{ row }">
                <div class="table-file-icon">
                  <img :src="getFileIconUrl(row.iconType || 'unknown')" alt="文件图标" class="table-file-icon-img" />
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="文件名" min-width="200">
              <template #default="{ row }">
                <div class="file-name-cell">
                  <span class="file-name">{{ row.name }}</span>
                  <div class="file-type-info">
                    <el-tag size="small" type="info">{{ getFileTypeName(row.type) }}</el-tag>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="180" />
            <el-table-column label="文件大小" width="120">
              <template #default="{ row }">
                <span v-if="row.size">{{ formatFileSize(row.size) }}</span>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
              <template #default="{ row }">
                <el-button type="text" size="small" @click="downloadFile(row)">
                  <el-icon>
                    <Download />
                  </el-icon>
                  下载
                </el-button>
                <el-dropdown @command="handleFileAction" trigger="click">
                  <el-button type="text" size="small">
                    更多
                    <el-icon>
                      <ArrowDown />
                    </el-icon>
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item :command="{ action: 'preview', file: row }">预览</el-dropdown-item>
                      <el-dropdown-item :command="{ action: 'delete', file: row }" divided>删除</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 分页 -->
        <div class="pagination-container">
          <div class="pagination-info">
            <span>共 {{ pagination.count }} 个文件</span>
          </div>
          <el-pagination v-model:current-page="pagination.page_no" v-model:page-size="pagination.page_size"
            :page-sizes="[10, 20, 50, 100]" :total="pagination.count" layout="sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
      </div>
    </el-card>

    <!-- 上传文件对话框 -->
    <el-dialog v-model="uploadDialogVisible" title="上传文件" width="500px">
      <el-upload class="upload-demo" drag action="#" multiple :auto-upload="false" :file-list="uploadFileList"
        @change="handleFileChange">
        <el-icon class="el-icon--upload">
          <UploadFilled />
        </el-icon>
        <div class="el-upload__text">
          将文件拖到此处，或<em>点击上传</em>
        </div>
        <template #tip>
          <div class="el-upload__tip">
            支持 jpg/png/pdf/doc/docx/xls/xlsx/ppt/pptx 等格式
          </div>
        </template>
      </el-upload>
      <template #footer>
        <el-button @click="uploadDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmUpload">确认上传</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Search,
  Grid,
  List,
  Download,
  MoreFilled,
  ArrowDown,
  UploadFilled,
  Delete,
  Document
} from '@element-plus/icons-vue'
import type { UploadFile } from 'element-plus'
import { filelist, getPreviewFileUrl, fileDel } from '@/api/allFiles'
import { fileTypeMap, iconMap } from "@/utils/fileIcons"
import CategorySelector from '@/components/category-selector/index.vue'



// 接口类型定义
interface FileItem {
  id: number
  name: string
  size: number | null
  type: string
  createBy: string
  createTime: string
  updateBy: string | null
  updateTime: string
  delFlag: number
  ossPath: string
  state: number | null
  downCount: number | null
  visitCount: number | null
  md5: string
  iconType?: string // 文件图标类型
}

interface FileAction {
  action: string
  file: FileItem
}

interface SearchParams {
  name: string
  type: string // 单选模式
  categoryIdList: string[] // 多选模式
}

interface PaginationData {
  page_no: number
  page_size: number
  count: number
}

// 响应式数据
const viewMode = ref<'grid' | 'list'>('grid')
const loading = ref(false)
const uploadDialogVisible = ref(false)
const uploadFileList = ref<UploadFile[]>([])
const selectedFiles = ref<FileItem[]>([]) // 批量选择的文件列表

// 搜索参数
const searchParams = reactive<SearchParams>({
  name: '',
  type: '', // 默认为空字符串，单选模式
  categoryIdList: [] // 默认为空数组，多选模式
})

// 分页数据
const pagination = reactive<PaginationData>({
  page_no: 1,
  page_size: 10,
  count: 0
})

// 文件列表数据
const fileList = ref<FileItem[]>([])

// 移除静态分类数据，现在使用CategorySelector组件

// 获取路由信息
const route = useRoute()

// 方法定义

/**
 * 获取文件列表
 */
const getFileList = async () => {
  try {
    loading.value = true
    const params = {
      page_no: pagination.page_no,
      page_size: pagination.page_size,
      name: searchParams.name || undefined,
      type: searchParams.type || undefined,
      categoryIdList: searchParams.categoryIdList.length > 0 ? searchParams.categoryIdList : undefined
    }

    const response = await filelist(params)
    console.log('response', response);
    const lists = response.lists || [] // 确保lists是数组

    // 无论lists是否为空，都要更新fileList和分页信息
    if (lists.length > 0) {
      const datalist = lists.map((item: any) => {
        if (item.isFolder === "1") return item;
        const ossPath = item?.ossPath;
        const fileType = ossPath?.split(".").pop();
        const type = item.type?.split("/")[0];
        if (type === "video" || type === "audio" || type === "image") {
          return {
            ...item,
            iconType: type,
          };
        } else if (type === "application") {
          const iconType = item.ossPath?.substring(item.ossPath.lastIndexOf(".") + 1);
          return {
            ...item,
            iconType: iconType,
          };
        } else if (type === "text" || type === "txt") {
          return {
            ...item,
            iconType: "text",
          };
        } else if (fileType === "excalidraw" || fileType === "xmind") {
          return {
            ...item,
            iconType: fileType,
          };
        } else {
          return {
            ...item,
            iconType: "unknown",
          };
        }
      });
      fileList.value = datalist
    } else {
      // 当lists为空时，清空文件列表
      fileList.value = []
    }

    console.log('fileList.value', fileList.value);

    // 更新分页信息
    pagination.count = response.count || 0
    pagination.page_no = response.page_no || 1
    pagination.page_size = response.page_size || 10
  } catch (error) {
    console.error('获取文件列表失败:', error)
    ElMessage.error('获取文件列表失败')
  } finally {
    loading.value = false
  }
}

/**
 * 格式化文件大小
 */
const formatFileSize = (size: number | null): string => {
  if (!size) return '-'

  const units = ['B', 'KB', 'MB', 'GB', 'TB']
  let index = 0
  let fileSize = size

  while (fileSize >= 1024 && index < units.length - 1) {
    fileSize /= 1024
    index++
  }

  return `${fileSize.toFixed(2)} ${units[index]}`
}

/**
 * 搜索处理
 */
const handleSearch = () => {
  pagination.page_no = 1
  getFileList()
}

/**
 * 重置搜索
 */
const resetSearch = () => {
  searchParams.name = ''
  searchParams.type = '' // 重置为空字符串
  searchParams.categoryIdList = [] // 重置为空数组
  pagination.page_no = 1
  getFileList()
}

/**
 * 设置视图模式
 */
const setViewMode = (mode: 'grid' | 'list') => {
  viewMode.value = mode
}

/**
 * 选择文件（预留方法，可用于文件详情查看等功能）
 */
const selectFile = (file: FileItem) => {
  console.log('选择文件:', file)
  // TODO: 实现文件详情查看或其他单击功能
}

/**
 * 获取文件图标URL
 */
const getFileIconUrl = (iconType: string) => {
  return iconMap[iconType] || iconMap.unknown
}

/**
 * 获取文件类型中文名称
 */
const getFileTypeName = (type: string) => {
  return fileTypeMap[type] || type
}

/**
 * 预览文件
 */
const previewFile = (file: FileItem) => {
  const ossPath = file.ossPath
  const kkFileUrl = import.meta.env.VITE_APP_API_FILEVIEWURL;
  const base64Encoded = btoa(ossPath);
  const encodeURL = encodeURIComponent(base64Encoded);
  const url = `${kkFileUrl}/fileview/onlinePreview?url=${encodeURL}`;
  window.open(url, "_blank");
}

/**
 * 下载文件
 */
const downloadFile = async (file: FileItem) => {
  if (!file.ossPath) {
    ElMessage.error('文件下载链接不存在')
    return
  }

  try {
    // 从完整的ossPath中截取相对路径
    // 例如: http://192.168.1.172:9001/xht/2025/07/10/1943152571715932160.xlsx
    // 截取为: 2025/07/10/1943152571715932160.xlsx
    const urlParts = file.ossPath.split('/xht/')
    if (urlParts.length < 2) {
      ElMessage.error('文件路径格式不正确')
      return
    }
    
    const relativePath = urlParts[1] // 获取 /xht/ 后面的部分
    
    // 调用获取预览文件URL接口
     const response = await getPreviewFileUrl({ objectName: relativePath })
    
    if (response) {
      // 创建一个临时的a标签来触发下载
      const link = document.createElement('a')
      link.href = response
      link.download = file.name
      link.target = '_blank'
      link.style.display = 'none'
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      ElMessage.success(`开始下载: ${file.name}`)
    } else {
      ElMessage.error('获取下载链接失败')
    }
  } catch (error) {
    console.error('下载文件失败:', error)
    ElMessage.error('下载文件失败，请稍后重试')
  }
}



/**
 * 处理文件操作
 */
const handleFileAction = (command: FileAction) => {
  const { action, file } = command

  switch (action) {
    case 'preview':
      if (file.ossPath) {
        previewFile(file)
      } else {
        ElMessage.error('文件预览链接不存在')
      }
      break

    case 'delete':
      ElMessageBox.confirm(
        `确定要删除文件 "${file.name}" 吗？`,
        '确认删除',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(async () => {
        try {
          // 单个删除也使用数组格式，保持接口调用一致性
          await fileDel([String(file.id)])
          // 重新获取文件列表
          getFileList()
        } catch (error) {
          console.error('删除文件失败:', error)
          ElMessage.error('删除文件失败')
        }
      }).catch(() => {
        ElMessage.info('已取消删除')
      })
      break
  }
}

/**
 * 处理表格选择变化
 */
const handleSelectionChange = (selection: FileItem[]) => {
  selectedFiles.value = selection
}

/**
 * 判断文件是否被选中（网格视图用）
 */
const isFileSelected = (file: FileItem): boolean => {
  return selectedFiles.value.some(selectedFile => selectedFile.id === file.id)
}

/**
 * 切换文件选择状态（网格视图用）
 */
const toggleFileSelection = (file: FileItem) => {
  const index = selectedFiles.value.findIndex(selectedFile => selectedFile.id === file.id)
  if (index > -1) {
    // 如果已选中，则取消选中
    selectedFiles.value.splice(index, 1)
  } else {
    // 如果未选中，则添加到选中列表
    selectedFiles.value.push(file)
  }
}

/**
 * 全选文件
 */
const selectAllFiles = () => {
  selectedFiles.value = [...fileList.value]
}

/**
 * 清空选择
 */
const clearSelection = () => {
  selectedFiles.value = []
}

/**
 * 批量删除文件
 */
const handleBatchDelete = () => {
  if (selectedFiles.value.length === 0) {
    ElMessage.warning('请先选择要删除的文件')
    return
  }

  const fileNames = selectedFiles.value.map(file => file.name).join('、')
  const message = selectedFiles.value.length === 1
    ? `确定要删除文件 "${fileNames}" 吗？`
    : `确定要删除选中的 ${selectedFiles.value.length} 个文件吗？\n\n文件列表：\n${fileNames}`

  ElMessageBox.confirm(
    message,
    '确认批量删除',
    {
      confirmButtonText: '确定删除',
      cancelButtonText: '取消',
      type: 'warning',
      dangerouslyUseHTMLString: false
    }
  ).then(async () => {
    try {
      loading.value = true

      // 批量删除文件 - 统一使用数组格式调用接口
      const fileIds = selectedFiles.value.map(file => String(file.id))
      await fileDel(fileIds)

      ElMessage.success(`成功删除 ${selectedFiles.value.length} 个文件`)

      // 清空选择
      selectedFiles.value = []

      // 重新获取文件列表
      await getFileList()
    } catch (error) {
      console.error('批量删除文件失败:', error)
      ElMessage.error('批量删除文件失败，请重试')
    } finally {
      loading.value = false
    }
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

/**
 * 处理文件上传变化
 */
const handleFileChange = (file: UploadFile, fileList: UploadFile[]) => {
  uploadFileList.value = fileList
}

/**
 * 确认上传
 */
const confirmUpload = () => {
  if (uploadFileList.value.length === 0) {
    ElMessage.warning('请选择要上传的文件')
    return
  }

  ElMessage.success(`成功上传 ${uploadFileList.value.length} 个文件`)
  uploadDialogVisible.value = false
  uploadFileList.value = []
  // TODO: 实现文件上传逻辑
}

/**
 * 处理页面大小变化
 */
const handleSizeChange = (size: number) => {
  pagination.page_size = size
  pagination.page_no = 1
  getFileList()
}

/**
 * 处理当前页变化
 */
const handleCurrentChange = (page: number) => {
  pagination.page_no = page
  getFileList()
}

// 生命周期
onMounted(() => {
  console.log('文件管理页面已加载')
  // 检查路由参数中是否有categoryId
  const categoryId = route.query.categoryId as string
  if (categoryId) {
    // 设置CategorySelector的选中值为categoryId（多选模式，但只选中一个）
    searchParams.categoryIdList = [categoryId]
    // 执行搜索
    handleSearch()
  } else {
    // 正常获取文件列表
    getFileList()
  }
})

// 监听路由变化，支持动态切换分类
watch(
  () => route.query.categoryId,
  (newCategoryId) => {
    if (newCategoryId) {
      // 设置CategorySelector的选中值为categoryId（多选模式，但只选中一个）
      searchParams.categoryIdList = [newCategoryId as string]
      handleSearch()
    } else {
      // 清空选中状态
      searchParams.categoryIdList = []
    }
  }
)
</script>

<style scoped lang="scss">
.all-files-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

// 顶部导航栏
.header-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 64px;
  background: white;
  border-bottom: 1px solid #e4e7ed;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

  .nav-left {
    display: flex;
    align-items: center;
    gap: 24px;

    .logo {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 18px;
      font-weight: 600;
      color: #303133;

      .logo-text {
        color: #409EFF;
      }
    }

    .search-container {
      .search-input {
        width: 400px;
      }
    }
  }

  .nav-right {
    display: flex;
    align-items: center;
    gap: 12px;

    .user-name {
      font-size: 14px;
      color: #606266;
    }
  }
}

// 主要内容区域
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px;
  overflow: hidden;
}

// 搜索条件区域
.search-section {
  padding: 20px;
  margin-bottom: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

  .search-header {
    margin-bottom: 16px;

    h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
    }
  }

  .search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;

    .search-item {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 200px;

      .search-label {
        font-size: 14px;
        font-weight: 500;
      }

      .search-input {
        width: 250px;
      }

      .search-select {
        width: 250px;
      }

      .type-select {
        width: 250px;
      }
    }

    .search-actions {
      display: flex;
      gap: 12px;
      margin-left: auto;
    }
  }
}

// 文件展示区域
.content-area {
  height: 650px;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

// 工具栏
.toolbar {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

  .toolbar-left {
    display: flex;
    align-items: center;
  }

  .toolbar-right {
    display: flex;
    align-items: center;
    gap: 16px;

    .result-count {
      font-size: 14px;
    }

    .select-actions {
      display: flex;
      align-items: center;
      gap: 8px;

      .el-button {
        transition: all 0.3s;

        &:hover {
          transform: translateY(-1px);
        }
      }
    }

    // 批量删除按钮样式
    .el-button--danger {
      transition: all 0.3s;

      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(245, 108, 108, 0.3);
      }
    }
  }
}

// 文件网格视图
.file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  flex: 1;
  overflow-y: auto;
  padding-bottom: 20px;

  .file-card {
    border-radius: 8px;
    padding: 20px;
    height: 250px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.3s;
    cursor: pointer;
    position: relative;

    &:hover {
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
      transform: translateY(-2px);
      border-color: #409eff;
    }

    &.selected {
      border-color: #409EFF;
      box-shadow: 0 4px 16px rgba(64, 158, 255, 0.2);
    }

    .file-checkbox {
      position: absolute;
      top: 8px;
      left: 8px;
      z-index: 10;

      .el-checkbox {
        --el-checkbox-checked-bg-color: #409EFF;
        --el-checkbox-checked-border-color: #409EFF;
      }
    }

    .file-icon {
      margin: 10px auto;
      width: 80px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      margin-bottom: 16px;
      background: var(--el-fill-color-lighter);
    }

    .file-icon-img {
      width: 48px;
      height: 48px;
      object-fit: contain;
    }

    .table-file-icon {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      background: var(--el-fill-color-lighter);
    }

    .table-file-icon-img {
      width: 20px;
      height: 20px;
      object-fit: contain;
    }

    .file-info {
      margin-bottom: 12px;

      .file-name {
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .file-meta {
        font-size: 12px;
        color: #909399;
        margin-bottom: 2px;
      }

      .file-size {
        font-size: 12px;
        color: #67C23A;
        font-weight: 500;
      }
    }

    .file-status {
      margin-bottom: 12px;
    }



    .file-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 8px;
      transition: opacity 0.3s;
    }
  }
}

// 文件列表视图
.file-list {
  flex: 1;
  overflow-y: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

  .file-name-cell {
    .file-name {
      font-weight: 500;
      margin-bottom: 4px;
    }

    .file-type-info {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-top: 4px;
    }
  }
}

// 空状态样式
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  margin: 20px 0;

  .empty-icon {
    margin-bottom: 24px;
  }

  .empty-text {
    h3 {
      font-size: 18px;
      color: #303133;
      margin: 0 0 12px 0;
      font-weight: 500;
    }

    p {
      font-size: 14px;
      color: #606266;
      margin: 0 0 16px 0;
      line-height: 1.5;
    }

    ul {
      list-style: none;
      padding: 0;
      margin: 0;
      font-size: 14px;
      color: #909399;

      li {
        padding: 4px 0;
        position: relative;
        padding-left: 16px;

        &:before {
          content: '•';
          position: absolute;
          left: 0;
          color: #c0c4cc;
        }
      }
    }
  }
}

// 分页容器
.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding: 16px 0;

  .pagination-info {
    font-size: 14px;
    color: #909399;
  }
}

// 上传对话框样式
.upload-demo {
  .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;

    &:hover {
      border-color: #409EFF;
    }
  }

  .el-icon--upload {
    font-size: 67px;
    color: #c0c4cc;
    margin: 40px 0 16px;
    line-height: 50px;
  }

  .el-upload__text {
    color: #606266;
    font-size: 14px;
    text-align: center;

    em {
      color: #409EFF;
      font-style: normal;
    }
  }

  .el-upload__tip {
    font-size: 12px;
    color: #909399;
    margin-top: 7px;
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .file-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

@media (max-width: 768px) {
  .main-content {
    padding: 16px;
  }

  .category-section {
    .category-tabs {
      overflow-x: auto;
      flex-wrap: nowrap;
      padding-bottom: 8px;

      .category-tab {
        flex-shrink: 0;
        white-space: nowrap;
      }
    }
  }

  .toolbar {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;

    .toolbar-left,
    .toolbar-right {
      justify-content: center;
    }
  }

  .file-grid {
    grid-template-columns: 1fr;
  }

  .header-nav {
    padding: 0 16px;

    .nav-left {
      gap: 12px;

      .search-container {
        .search-input {
          width: 200px;
        }
      }
    }
  }
}
</style>